﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页-招生培训</title>
    <th:block th:include="include :: front-common-css-js" />  
    <style>
        .banners-pc { clear: both; height: 685px; }
        .banners-pc .frame { height: 685px; background: no-repeat center center; background-size: cover; }

        .banners-mb { display: none; clear: both; height: 685px; }
        .banners-mb div { height: 100%; }
        .banners-mb .frame { height: 100%; background: no-repeat center center; background-size: cover; }

        @media (max-width: 1024px) {
            .banners-pc { display: none; }
            .banners-mb { display: block; }
        }
        .main1 { }
        .main1 .offset { padding-top: 70px; }
        .main1 .offset .list { overflow: hidden; margin-left: -100px; margin-bottom: -30px; }
        .main1 .offset .list > li { float: left; width: 25%; padding-left: 100px; padding-bottom: 30px; }
        .main1 .offset .list > li:nth-child(4n+1) { clear: both; }
        .main1 .offset .list > li .pic { text-align: center; margin-top: 5px; height: 224px; width: 224px; }
        .main1 .offset .list > li .pic img { border-radius: 50%; display: inline-block; text-align: center; margin-top: 13px; }
        .main1 .offset .list > li .font { text-align: center; }
        .main1 .offset .list > li .font .p1 { font-size: 18px; color: #333; padding-top: 30px; }
        .main1 .offset .list > li .font .p1 .line { display: block; width: 32px; height: 2px; background: #a93f52; margin: 15px auto 20px auto; }
        .main1 .offset .list > li .font .p2 { color: #999; line-height: 24px; }
        .main1 .offset .list > li .font .btn { text-align: center; margin-top: 30px; }
        .main1 .offset .list > li .font .btn .more { display: inline-block; padding: 10px 40px; border-radius: 50px; color: #fff; }
        .main1 .offset .list .li1 .pic { background: url(img/kc_list_bg1.png) no-repeat center center; background-size: contain; }
        .main1 .offset .list .li2 .pic { background: url(img/kc_list_bg2.png) no-repeat center center; background-size: contain; }
        .main1 .offset .list .li1 .font .btn .more { background: #ec8520; }
        .main1 .offset .list .li2 .font .btn .more { background: #058bd6; }

        @media (max-width: 1024px) {
            .main1 .offset .list > li { width: 50%; }
            .main1 .offset .list > li:nth-child(n) { clear: none; }
            .main1 .offset .list > li:nth-child(2n+1) { clear: both; }
            .main1 .offset .list > li .pic { margin-left: auto; margin-right: auto; }
        }

        @media (max-width: 600px) {
            .main1 .offset .list > li { width: 100%; }
            .main1 .offset .list > li:nth-child(n) { clear: none; }
        }

        @media (max-width: 300px) {
            .main1 .offset .list > li .pic { height: auto; width: auto; }
        }

        .main2 { background: url(img/980.jpg) no-repeat center center; height: 780px; padding-top: 70px; margin-top: 120px; }
        .main2 .right { float: right; background: #ec8718; }
        .main2 .intro .font { max-width: 750px; padding-top: 70px; }
        .main2 .intro .font .h1 { font-size: 18px; color: #333; padding-bottom: 40px; }
        .main2 .intro .font .p1 { color: #666; line-height: 30px; }
        .main2 .intro .font .more { color: #df3d47; margin-top: 20px; display: block; }
        .main2 .intro .list { overflow: hidden; margin-left: -24px; margin-bottom: -20px; margin-top: 60px; }
        .main2 .intro .list > li { float: left; padding-left: 24px; padding-bottom: 20px; }
        .main2 .intro .list > li .box { display: block; position: relative; }
        .main2 .intro .list > li .box img { border-radius: 20px; display: inline-block; max-width: 156px; }
        .main2 .intro .list > li .box:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 4px solid #ec8718; opacity: 0; border-radius: 20px; }
        .main2 .intro .list > li .box:hover:before { opacity: 1; transition: ease .4s; }

        @media (max-width: 950px) {
            .main2 { background: #fbefe1; height: auto; padding-bottom: 50px; }
            .main2 .intro .font { max-width: none; text-align: center; }
            .main2 .intro .list > li { width: 25%; }
            .main2 .intro .list > li .box img { width: 100%; max-width: none; }
        }

        @media (max-width: 600px) {
            .main2 .intro .list > li { width: 33.33%; }
        }

        @media (max-width: 350px) {
            .main2 .intro .list > li { width: 50%; }
        }

        .main3 { margin-top: 90px; }
        .main3 .top { overflow: hidden; padding-top: 70px; }
        .main3 .top .pic { float: left; padding-right: 60px; position: relative; }
        .main3 .top .pic .bg { width: 576px; height: 325px; background: #ec8520; display: block; border-radius: 20px; }
        .main3 .top .pic .tp { display: block; position: absolute; left: 20px; top: -20px; }
        .main3 .top .pic .tp img { border-radius: 20px; }
        .main3 .top .font { float: left; max-width: 542px; }
        .main3 .top .font .nav { overflow: hidden; padding: 14px 0; background: #0b8f54; display: inline-block; border-radius: 30px }
        .main3 .top .font .nav > li { float: left; padding: 0 40px; }
        .main3 .top .font .nav > li .box { display: block; color: #fff; }
        .main3 .top .font .con { }
        .main3 .top .font .con .p1 { font-size: 18px; color: #333; padding: 54px 0 24px 0; }
        .main3 .top .font .con .p2 { color: #666; line-height: 24px; }
        .main3 .top .font .con .more { color: #df3d47; padding-top: 20px; display: block; }
        .main3 .bottom { margin-top: 50px; overflow: hidden; }
        .main3 .bottom .list { margin-left: -40px; margin-bottom: -30px; }
        .main3 .bottom .list > li { float: left; width: 33.33%; padding-left: 40px; padding-bottom: 30px; }
        .main3 .bottom .list > li .box { background: #f1f1f1; display: block; border-radius: 20px; padding: 36px 40px 30px 36px; }
        .main3 .bottom .list > li .box .time { font-size: 18px; color: #999; padding-bottom: 15px; }
        .main3 .bottom .list > li .box .line { width: 34px; height: 2px; background: #ec8520; display: inline-block; }
        .main3 .bottom .list > li .box .p1 { font-size: 16px; color: #333; padding: 18px 0; }
        .main3 .bottom .list > li .box .p2 { color: #999; line-height: 24px; }
        .main3 .bottom .list > li .box:hover { background: #ec8520; }
        .main3 .bottom .list > li .box:hover .time { color: rgba(255,255,255,.6); }
        .main3 .bottom .list > li .box:hover .line { background: #fff; }
        .main3 .bottom .list > li .box:hover .p1 { color: #fff; }
        .main3 .bottom .list > li .box:hover .p2 { color: rgba(255,255,255,.6); }

        @media (max-width: 1024px) {
            .main3 .top .pic { float: none; padding-right: 0; }
            .main3 .top .pic .bg { display: none; }
            .main3 .top .pic .tp { position: unset; text-align: center; }
            .main3 .top .font { float: none; max-width: none; padding-top: 30px; }
            .main3 .top .font .nav { display: block; margin: 0 100px; }
            .main3 .top .font .nav > li { width: 50%; }
            .main3 .top .font .nav > li .box { text-align: center; }
            .main3 .top .font .con .more { text-align: center; }

            .main3 .bottom .list > li { width: 50%; }
            .main3 .bottom .list > li .box { padding: 20px 20px; }
        }

        @media (max-width: 700px) {
            .main3 .top .font .nav { margin: 0; }
            .main3 .bottom .list > li { width: 100%; }
            .main3 .bottom .list > li .box { padding: 20px 10px; }
        }
    </style>  
</head>
<body>

    <!--主体内容 end-->
    <th:block th:include="include :: front-header" /> 
    <div class="banners-pc">
        <div class="frame" th:style="'background:url(' + @{/front/img/3c72ba67d3a462dd.jpg} + ') no-repeat center center;background-size: cover;'"  ></div>
        <div class="frame" th:style="'background:url(' + @{/front/img/79f14ad265251e93.jpg} + ') no-repeat center center;background-size: cover;'" ></div>
        <div class="frame" th:style="'background:url(' + @{/front/img/e0c7eb48831d1b4d.jpg} + ') no-repeat center center;background-size: cover;'" ></div>
    </div>
    <div class="banners-mb" zoom-width="1024" zoom-heigh="685">
        <div class="frame" th:style="'background:url(' + @{/front/img/3c72ba67d3a462dd.jpg} + ') no-repeat center center;background-size: cover;'" ></div>
        <div class="frame" th:style="'background:url(' + @{/front/img/79f14ad265251e93.jpg} + ') no-repeat center center;background-size: cover;'" ></div>
        <div class="frame" th:style="'background:url(' + @{/front/img/e0c7eb48831d1b4d.jpg} + ') no-repeat center center;background-size: cover;'" ></div>
    </div>
    <script>
        (function () {
            $('.banners-pc, .banners-mb').slick({ arrows: true, dots: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 5000, speed: 500 });
        })();
    </script>
    <style>
        .banners-pc .slick-dots, .banners-mb .slick-dots { bottom: 60px; }
    </style>

    <!--主体内容-->
    <!--课程选择-->
    <div class="main1">
        <div class="g_cw">
            <div class="g_title">
                <p class="l2">Course <span class="ico"><img  th:src="@{/front/img/5c753d7641e09.png}"/></span> Presentation</p>
                <p class="l1">精品课程</p>
            </div>
            <div class="offset">
                <ul class="list">
                    <li class="li1">
                            <p class="pic"><img  th:src="@{/front/img/4951b35f706ed290.jpg}" class="g_imgf" /></p>
                            <div class="font">
                                <p class="p1">机器人<span class="line"></span></p>
                                <p class="p2">童通过拉丁舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p>                              
                            </div>
                    </li>
                    <li class="li1">
                            <p class="pic"><img th:src="@{/front/img/20fd3b8206f8c509.jpg}" class="g_imgf" /></p>
                            <div class="font">
                                <p class="p1">自然科学<span class="line"></span></p>
                                <p class="p2">童通过民族舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p>
                                
                            </div>
                    </li>
                    <li class="li1">
                            <p class="pic"><img th:src="@{/front/img/5f2f85db4cf71aba.jpg}"  class="g_imgf" /></p>
                            <div class="font">
                                <p class="p1">积木<span class="line"></span></p>
                                <p class="p2">童通过中国舞的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p>
                              
                            </div>
                    </li>
                    <li class="li1">
                            <p class="pic"><img th:src="@{/front/img/dc65472b0eedd3c5.jpg}"  class="g_imgf" /></p>
                            <div class="font">
                                <p class="p1">绘画与艺术<span class="line"></span></p>
                                <p class="p2">童通过芭蕾的训练可以再未来的身体发育中曲线变得更美，身心健康活动，增强体质，气质高贵。</p>
                                
                            </div>                     
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="main2">
        <div class="g_cw">
            <div class="g_title">
                <p class="l2" style="color:#b54884;">Excellent <span class="ico"><img th:src="@{/front/img/5c753d7641e09.png}" /></span> Course</p>
                <p class="l1" style="color:#df3d47;">师生风采</p>
            </div>
            <div class="intro">
                <div class="font">
                    <p class="h1">教学总监：李文丽</p>
                    <p class="p1">
                        硕士学位，毕业于沈阳音乐学院。从教6年，曾担任浙江省歌剧舞剧院独舞演员，全国“桃李杯”舞蹈比赛一等奖，全国舞蹈比赛表演三等奖。<br />
                        辽宁省“荷花杯”舞蹈比赛表演金奖，曾为签国家领导人江泽民进行舞蹈表演。曾参加辽宁电视台、湖南卫视春节文艺晚会......
                    </p>
                    <a href="teacher.html" class="more">READ MORE ></a>
                </div>

                <!-- <ul class="list">
                    <li><a class="box" target="_blank"><img th:src="@{/front/img/20fd3b8206f8c509.jpg}"  /></a></li>
                    <li><a class="box" target="_blank"><img th:src="@{/front/img/4951b35f706ed290.jpg}"  /></a></li>
                    <li><a class="box" target="_blank"><img th:src="@{/front/img/5f2f85db4cf71aba.jpg}"  /></a></li>
                    <li><a class="box" target="_blank"><img th:src="@{/front/img/dc65472b0eedd3c5.jpg}"  /></a></li>
                 </ul> -->
            </div>
        </div>
    </div>


    <div class="main3">
        <div class="g_cw">
            <div class="g_title">
                <p class="l2" style="color:#0b8f54;">Recent <span class="ico"><img th:src="@{/front/img/5c753d7641e09.png}"  /></span> Arrangements</p>
                <p class="l1" style="color:#ec8520;">近期安排</p>
            </div>
            <div class="top">
                <p class="pic">
                    <span class="tp"><img th:src="@{/front/img/index_news1.jpg}"  class="g_imgf" /></span>
                    <span class="bg"></span>
                </p>
                <div class="font">
                    <ul class="nav">
                        <li><a href="news.html?_ct=最新活动" class="box ">最新活动</a></li>
                        <li style="border-left:1px solid #fff;"><a href="news.html?_ct=行业新闻" class="box ">行业新闻</a></li>
                    </ul>
                    <div class="con">
                        <a href="newsdetail.html?_id=10010" class="box" target="_blank">
                            <p class="p1 g_ell">新增舞蹈班课程</p>
                            <p class="p2">单色舞蹈2020年度北京青少年舞蹈大赛金奖，全国青少年拉丁舞二等奖优秀教师亲自指导，与优秀教师零距离接触，手把手指导，海量资源，等你而来</p>
                            <span class="more">READ MORE ></span>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="bottom">
                <ul class="list">
                    <li>
                        <a href="newsdetail.html?_id=10010" class="box" target="_blank">
                            <p class="time">2019.02.28</p>
                            <span class="line"></span>
                            <p class="p1 g_ell">新增舞蹈班课程</p>
                            <p class="p2">单色舞蹈2020年度北京青少年舞蹈大赛金奖，全国青少年拉丁舞二等奖优秀教师亲自指导，与优秀教师零距离接触，手把手指导，海量资源，等你而来</p>
                        </a>
                    </li>
                    <li>
                        <a href="newsdetail.html?_id=10010" class="box" target="_blank">
                            <p class="time">2019.02.28</p>
                            <span class="line"></span>
                            <p class="p1 g_ell">新增舞蹈班课程</p>
                            <p class="p2">单色舞蹈2020年度北京青少年舞蹈大赛金奖，全国青少年拉丁舞二等奖优秀教师亲自指导，与优秀教师零距离接触，手把手指导，海量资源，等你而来</p>
                        </a>
                    </li>
                    <li>
                        <a href="newsdetail.html?_id=10009" class="box" target="_blank">
                            <p class="time">2019.02.28</p>
                            <span class="line"></span>
                            <p class="p1 g_ell">新增舞蹈班课程</p>
                            <p class="p2">单色舞蹈2020年度北京青少年舞蹈大赛金奖，全国青少年拉丁舞二等奖优秀教师亲自指导，与优秀教师零距离接触，手把手指导，海量资源，等你而来</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    <!--主体内容 end-->
    <th:block th:include="include:: front-footer" />           
    <script>
		$(function () {
			//页面的脚本数据......
			
			
			
			
			
		});
    </script>
</body>
</html>

